<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>百卓移动端H5管理后台</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{index::#header}"></div>
    <div th:replace="~{index::#menu}"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <form class="layui-form" action="" enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label class="layui-form-label">登陆账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">原密码</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="password" name="opassword" placeholder="请输入" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                    <div class="layui-form-mid layui-word-aux">6-20个字符</div>-->
<!--                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">6-20个字符</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认新密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="rpassword" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">6-20个字符</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="upload">上传头像</button>
                        <input type="hidden" name="headPic" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        <div class="layui-upload-list" style="padding-left: 110px">
                            <img class="layui-upload-img" id="preview_avatar">
                            <p id="msg"></p>
                            <p id="retransmission"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" required th:value="${id}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        <input type="hidden" name="op_id" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        <button class="layui-btn" lay-submit lay-filter="commit">立即提交</button>
                        <!-- <button type="reset" class="layui-btn layui-btn-primary">全部清空</button> -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form'], function() {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        remember_user = JSON.parse(sessionStorage.getItem("remember_user"))
        if (!remember_user) {
            window.location.href = '/login'
        }
        $('#head_pic').attr("src", remember_user.headPic)
        $('#username').html(remember_user.name)
        $('input[name=op_id]').val(remember_user.id)
        $('#layout').click(function () {
            layer.confirm('是否退出当前用户？', {
                btn: ['退出','取消'], //按钮
                title: "提示"
            }, function(){
                sessionStorage.removeItem("remember_user")
                window.location.href = '/login'
            });
        })

        $.ajaxSetup({
            headers: {
                Authorization:"Bearer "+ remember_user.token
            }
        });

        //监听提交
        form.on('submit(commit)', function(data) {
            formData = data.field;
            if (formData.password != formData.rpassword) {
                layer.msg('密码与确认密码不一致', {icon: 5});
                return false;
            }
            $.ajax({
                type : "put",
                url : "/api/user/update",
                dataType: "json",
                data: JSON.stringify(formData),
                contentType: "application/json",
                success:function (rs) {
                    if (rs.code != 200) {
                        layer.msg(rs.message, {icon: 5});
                    } else {
                        layer.msg(rs.message, {icon: 6});
                    }
                }
            })
            return false;
        });
    });
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        remember_user = JSON.parse(sessionStorage.getItem("remember_user"))
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload'
            ,url: '/api/user/upload' //上传接口
            ,drag:true
            ,exts:"jpg|png|gif|jpeg"
            ,before: function(obj){
                //预读本地文件
                obj.preview(function(index, file, result){
                    $('#preview_avatar').attr({'src':result, "width":100, "height": 100}); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != 200){
                    return layer.msg("上传失败", {icon: 5});
                }
                //上传成功
                $("#msg").html('<span style="color: green;">上传成功</span>')
                $("input[name=headPic]").val(res.data)
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var retransmission = $('#retransmission');
                retransmission.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                retransmission.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        id = $('input[name=id]').val();
        if (id) {
            $.ajax({
                type : "get",
                url : "/api/user/detail",
                dataType: "json",
                data:{id: parseInt(id)},
                headers: {
                    Authorization:"Bearer "+ remember_user.token
                },
                contentType: "application/json",
                success:function (rs) {
                    if (rs.code != 200) {
                        layer.msg(rs.message, {icon: 5});
                    } else {
                        $('input[name=name]').val(rs.data.name)
                        $('input[name=headPic]').val(rs.data.headPic)
                        $('#preview_avatar').attr({'src': rs.data.headPic, "width":100, "height": 100}); //图片链接（base64）
                    }
                }
            })
        } else {
            layer.msg("地址被篡改", {icon: 5});
            window.location.href = '/userList'
        }
    });

</script>
</body>

</html>